<template>
  <div class="registered-container totalRevenue appMainWarp">
    <el-form :inline="true" :model="searchKey" class="demo-form-inline">
      <el-form-item label="交易时间:">
        <el-date-picker
          v-model="searchKey.time"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item label="院区:">
        <el-select v-model="searchKey.hospital_area_no" placeholder="请选择">
          <el-option
            v-for="item in [
              ...[{area_code: '', area_name: '全部'}],
              ...searchKey.Hospital,
            ]"
            :key="item.area_code"
            :label="item.area_name"
            :value="item.area_code"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onLoad">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-download" @click="onExport">导出</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        ref="table"
        v-loading="tableLoading"
        center
        class="table"
        :data="tableData"
        :span-method="objectSpanMethodd"
        stripe
        border
      >
        <el-table-column label="总对账报表" align="center">
          <el-table-column label="业务/支付方式" align="center">
            <template slot-scope="scope">{{ scope.row.pay_name }}</template>
          </el-table-column>
          <el-table-column label="商户号" align="center">
            <template slot-scope="scope">{{ scope.row.shanghu.merchant }}</template>
          </el-table-column>
          <el-table-column label="实收(银行回执单)" align="center">
            <el-table-column label="实收" align="center">
              <template slot-scope="scope">{{ scope.row.shanghu.shishou }}</template>
            </el-table-column>
            <el-table-column label="实退" align="center">
              <template slot-scope="scope">{{ scope.row.shanghu.shitui }}</template>
            </el-table-column>
            <el-table-column label="净收" align="center">
              <template slot-scope="scope">{{ scope.row.shanghu.jing }}</template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="应收" align="center">
            <el-table-column v-for="col in cols" :key="col.id" :label="col.bill_name">
              <el-table-column label="实收" :prop="col.shishou_field" align="center" />
              <el-table-column label="实退" :prop="col.shitui_field" align="center" />
              <el-table-column label="净收" :prop="col.jingshou_field" align="center" />
            </el-table-column>
            <el-table-column label="合计" align="center">
              <template slot-scope="scope">{{ scope.row.total }}</template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="差额(实收-应收)" align="center">
            <template slot-scope="scope">{{ scope.row.diff }}</template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import { sumStatistic, treeList } from '@/api/transactRecords/index'
import { getUserName } from '@/utils/auth'
export default {
  name: 'LedgerReport',
  data() {
    return {
      tableLoading: false,
      searchKey: {
        time: '', // 交易日期
        bustype: '2',
        hospital_area_no: '', // 选择院区
        Hospital: [],
        system_no: '100', // 平台
        System: [],
        reconciliation: '', // 对账业务
        bustypeList: []
      },
      minDate: '',
      maxDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.minDate = minDate
          this.maxDate = maxDate
        },
        disabledDate: (time) => { // 查询时间跨度为365天
          if (this.minDate) {
            var range = 365 * 24 * 3600 * 1000
            return time.getTime() > Date.now() || time.getTime() > (this.minDate.getTime() + range) || time.getTime() < (this.minDate.getTime() - range)
          }
          return time.getTime() > Date.now()
        }
      },
      cols: [
        // { pay: 'pay_fee_100', refund: 'refund_fee_100', label: '住院' },
        // { pay: 'pay_fee_200', refund: 'refund_fee_200', label: '门诊' }
      ],
      tableData: [
        // {
        //   terminal_code: 'Z001',
        //   pay_fee_100: 1112730.62,
        //   refund_fee_100: 35039.56,
        //   bill_type_name_100: '住院',
        //   pay_fee_200: '',
        //   refund_fee_200: 4364.93,
        //   bill_type_name_200: '门诊'
        // },
        // {
        //   terminal_code: 'Z002',
        //   pay_fee_100: 230711.33,
        //   refund_fee_100: 6414.10,
        //   bill_type_name_100: '住院',
        //   pay_fee_200: '',
        //   refund_fee_200: 599.14,
        //   bill_type_name_200: '门诊'
        // }
      ],
      position: 0, // 合并单元格
      rowSpanArr: []// 合并单元格
    }
  },
  watch: {
    'searchKey.time': {
      deep: true,
      handler(val) {
        if (val == null) {
          this.minDate = null
        }
      }
    }
  },
  created() {
    this.searchKey.time = this.utils.Foryest()
  },
  mounted() {
    this.onLoad()
    this.getAreanoList()
  },
  methods: {
    // 表格合并
    objectSpanMethodd({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex >= 5) {
        const _row = this.rowSpanArr[rowIndex]
        return {
          rowspan: _row, // 行
          colspan: 1 // 列
        }
      }
    },
    // 根据字段相同单元格
    getRowSpan() {
      this.rowSpanArr = []
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.rowSpanArr.push(1)
          this.position = 0
        } else {
          if (this.tableData[index].pay_name === this.tableData[index - 1].pay_name) {
            this.rowSpanArr[this.position] += 1 // 项目名称相同，合并到同一个数组中
            this.rowSpanArr.push(0)
            this.tableData[index].pay_name = this.tableData[index - 1].pay_name
          } else {
            this.rowSpanArr.push(1)
            this.position = index
          }
        }
      })
    },
    getAreanoList() {
      treeList({ username: getUserName() })
        .then(res => {
          this.searchKey.Hospital = res.data.area
        })
        .catch(() => {})
    },
    // 系统配置搜索
    onLoad() {
      var that = this
      var params = {}
      params.areano = that.searchKey.hospital_area_no
      if (that.searchKey.time && that.searchKey.time.length > 0) {
        params.startime = that.searchKey.time[0]
        params.endtime = that.searchKey.time[1]
      } else {
        params.startime = ''
        params.endtime = ''
      }
      that.tableLoading = true
      sumStatistic(params)
        .then(res => {
          that.tableLoading = false
          this.cols = res.title
          this.tableData = res.data
          this.getRowSpan()
        })
        .catch(() => {
          that.tableLoading = false
        })
    },
    // 导出
    onExport() {
      var params = {}
      var that = this
      if (that.searchKey.time && that.searchKey.time.length > 0) {
        params.startime = that.searchKey.time[0]
        params.endtime = that.searchKey.time[1]
      } else {
        params.startime = ''
        params.endtime = ''
      }
      params.areano = that.searchKey.hospital_area_no
      var viewUrl = `/cms/sumStatistic?&areano=${
        params.areano
      }&startime=${
        params.startime
      }&endtime=${params.endtime}&export=${1}`
      window.location.href = process.env.VUE_APP_BASE_API + viewUrl
    }
  }
}
</script>
<style scoped>
.header-font-size{
  font-size: 24px;
}
</style>
